::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar-thumb {
  display: none;
}

.xswitch-wrapper {
  display: flex;
  overflow: hidden;
  .xswitch-tabs {
    padding: 0;
    width: 200px;
    white-space: nowrap;
    overflow: auto;
    margin-right: -1px;
    z-index: 2;
    margin-bottom: 0;
    padding-bottom: 44px;
    flex: 1;
    li {
      padding: 5px 10px;
      line-height: 40px;
      border: 1px solid transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      .delete-icon {
        display: none;
        opacity: 0;
      }
      .label {
        flex: 1;
        overflow: hidden;
      }
      &:hover {
        background: #efefef;
        .delete-icon {
          display: inline-block;
          opacity: 0.5;
          &:hover {
            opacity: 1;
          }
        }
      }
      &:first-of-type {
        border-top: 0;
        .delete-icon {
          display: none !important;
        }
      }
      &.editing {
        border-color: #bfbfbf #fff #bfbfbf transparent;
      }
      &.dragovering {
        background-color: #eee;
      }
    }
  }
  .xswitch-new-item-container {
    padding: 10px;
    z-index: 3;
    background: #fff;
    width: 100%;
    position: relative;
    .confirm-button{
      position: absolute;
      right: 15px;
      top: 15px;
      cursor: pointer;
    }
  }
}

.xswitch-container {
  width: 100%;
  min-width: 600px;
  min-height: 600px;
  height: 100vh;
}

.xswitch-left-area{
  display: flex;
  align-items: baseline;
  flex-direction: column;
  min-height: 600px;
  height: 100vh;
  border-right: 1px solid #bfbfbf;
}

.toolbar-area {
  width: 120px;
  position: fixed;
  right: 20px;
  top: 13px;
  z-index: 1;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.switch-control {
  width: 50px;
}

.xswitch-icon {
  width: 22px;
  opacity: 0.5;
  &:hover {
    opacity: 1;
  }
}
